<template>
  <div>
    <h1 ref="h1">$refs使用</h1>
    <button @click="operateDOM">操作DOM</button>
    <button @click="invokeChildFn">调用子组件的方法</button>
    <hr />
    <Child ref="child" />
  </div>
</template>

<script>
import Child from "./components/$refs子组件.vue";
/**
 * $refs使用步骤
 * 1.在元素身上写一个叫ref的属性：<元素 ref="名字">value</元素>
 * 2.获取：this.$refs.名字
 *
 * $refs作用：
 * 1.获取DOM对象 ->进行DOM操作
 * 2.获取组件实例 ->调用子组件的方法，实现某些功能
 */
export default {
  created() {
    // 获取不到DOM
    console.log("组件实例：", this, this.$refs, this.$refs.h1);
  },
  mounted() {
    // 获取DOM
    console.log("挂载了：", this.$refs);
    console.log("获取DOM对象：", this, this.$refs.h1);
  },
  methods: {
    // 操作DOM
    operateDOM() {
      this.$refs.h1.style.color = "red";
    },
    // 执行子组件的方法
    invokeChildFn() {
      console.log(this.$refs.child);
      this.$refs.child.msg = 2;
      // this.$refs.child 等同于 子组件的this
      this.$refs.child.setMsg();
    },
  },
  components: {
    Child,
  },
};
</script>

<style scoped>
</style>